import React, { useState, useEffect } from 'react'
import { ArrowLeftOutlined, ExportOutlined, EnvironmentFilled } from '@ant-design/icons'
import { useNavigate, useSearchParams } from 'react-router-dom'
import './Tcss/txq.scss'
import { Sticky, ShareSheet, Toast } from 'react-vant'
import { Arrow, StarO, ServiceO } from '@react-vant/icons'
import axios from 'axios';

let a = require("../../assets/1.png")
let b = require("../../assets/p.png")

export default function Txq(props) {
    useEffect(() => {
        get()
    }, [])

    const [show, setShow] = useState(true)
    const [list, setlist] = useState([])
    console.log(list)
    let get = async () => {
        let { data } = await axios.get("http://123.57.180.216:3000/getmove_y")
        setlist(data.data)
    }

    const [searchParams, setSearchParams] = useSearchParams()
    const name = searchParams.get('name')
    const img = searchParams.get('img')
    const price = searchParams.get('price')
    const time = searchParams.get('time')
    const adress = searchParams.get('address')
    const home = searchParams.get('home')

    const options = [
        [
            { name: '微信', icon: 'wechat' },
            { name: '朋友圈', icon: 'wechat-moments' },
            { name: '微博', icon: 'weibo' },
            { name: 'QQ', icon: 'qq' }
        ]
    ]
    const [visible, setVisible] = useState(false)
    const navigate = useNavigate()
    return (
        <div>
            <Sticky offsetTop={0}>
                <div className='header'>
                    <ArrowLeftOutlined className='t1' onClick={() => navigate('/app/type')} />
                    <span className='title'>演出详情</span>
                    <ExportOutlined className='t2' onClick={() => setVisible(true)} />
                </div>
            </Sticky>
            <div>
                <div className='info'>
                    <img src={a} />
                    <div className='info1'>
                        <span className='name'>{name}</span>
                        <span className='type'>{home}</span>
                        <span className='price'>￥{price}</span>
                        <span className='time'>{time}</span>
                    </div>
                </div>
                <div className='adress' onClick={() => { navigate('/tcg'); window.location.reload() }}>
                    <span className='adress1'>{adress}</span>
                    <span className='adress2'>裕华路1777号</span>
                    <EnvironmentFilled className='adress3' />
                </div>
                <div className='jian'>
                    <span className='jian1'>演出简介</span>
                    <div className='ying'></div>
                    <div className='jian2'>
                        薛之谦巡演开启，“天外来物”不断在观演人次与开票数据上创造着惊喜。“天外来物”演出现场，既有创新式实景搭建硬核科技感的舞美，又有薛之谦高质量唱演呈现出的精妙构思的音乐故事，更有薛之谦自2006年发布同名专辑《薛之谦》以来，长达17年在音乐领域的深耕与坚持。《认真的雪》《演员》《丑八怪》《刚刚好》等代表作脍炙人口、传唱度非凡，万人合唱的盛况场场上演。
                        <br />此次巡演以薛之谦第十一张专辑《天外来物》命名，并沿用“天外来物”作为演唱会的主题概念，包含着薛之谦对于音乐和生活的独到见解。快节奏的生活使得许多人容易忽略生活中的美好而变得急功近利，《天外来物》的核心概念正是想借音乐的抒发，希望每个人都能够在心中保留一块单纯善良的净土。</div>
                </div>
                <div className='zhi'>
                    <span className='jian1'>购票须知</span>
                    <div className='ying'></div>
                    <p className='ming'>限购说明</p>
                    <p className='ming1'>每人限购4张</p>
                    <p className='ming'>退换政策</p>
                    <p className='ming1'>由于票据的时效性，所有票品一经售出不退不换。</p>
                    <p className='ming'>其他说明</p>
                    <p className='ming1'>1.2m以下儿童入场需购全票且签署免责协议。</p>
                </div>
                <div className='jia'>
                    <span className='jian1'>演出评价</span>
                    <span className='quan' onClick={() => { navigate('/tpl') }}>全部<Arrow /> </span>
                    <div className='ying'></div>
                    <div className='ping' onClick={() => navigate('/pxq')}>
                        <div className='ping1'>
                            <img src={b} />
                        </div>
                        <div className='ping1'>
                            <img src={b} />
                        </div>
                        <div className='ping1'>
                            <img src={b} />
                        </div>
                    </div>
                </div>
                <div className='tui'>
                    <span className='jian1'>为你推荐</span>
                    <div className='ying'></div>{
                        list.map((item, index) => {
                            return <div className='info' key={index}
                                onClick={() => { navigate(`/txq?id=${item._id}&name=${item.name}&home=${item.homeid.name}&img=${item.img}&price=${item.price}&time=${item.time}&address=${item.address}`) }}>
                                <img src={a}></img>
                                <div className='info1'>
                                    <span className='name'>{item.name}</span>
                                    <span className='time'>{item.time}</span>
                                    <span className='address'>{item.address}</span>
                                    <span className='price'>
                                        <span>￥</span>
                                        {item.price}</span>
                                </div>
                            </div>
                        })
                    }
                </div>
            </div>
            <div className='footer'>
                <span className='sc'>
                    {show ? <svg t="1718460819840" onClick={() => { setShow(false); Toast.info('收藏成功') }} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5549" width="27" height="27"><path d="M911.104 487.168c21.856-21.408 30.272-49.76 21.44-76.64-8.704-26.816-32.224-44.672-62.464-49.088l-198.56-28.992a23.136 23.136 0 0 0-4.512-3.424L578.24 148.384C564.736 120.864 540.352 104 512 104c-28.32 0-52.704 16.864-66.24 44.352l-88.8 180.768a21.696 21.696 0 0 0-4.48 3.328l-198.592 28.96c-30.24 4.48-53.664 22.336-62.4 49.152-8.864 26.784-0.448 55.136 21.44 76.608l143.68 140.608a27.552 27.552 0 0 0 1.856 5.632l-33.952 198.72c-5.12 30.304 4.704 58.24 27.712 74.88 11.904 8.544 25.92 12.992 40.64 12.992 13.056 0 26.336-3.52 38.912-10.176l177.6-93.76c-0.704 0.384 5.984 0.384 5.344 0.032l177.536 93.76c26.944 14.24 56.512 13.632 79.488-2.848 23.04-16.672 32.96-44.576 27.808-74.816l-33.92-198.656c0.032 0.384 2.112-6.08 1.824-5.824l102.88-100.64 40.8-39.904z m-32.512-35.392l-144.768 141.696c-10.976 10.784-18.176 33.088-15.552 48.192l33.92 198.592c2.208 12.992-1.152 22.464-8.544 27.808-7.328 5.248-17.408 5.44-28.992-0.64l-177.6-93.792c-13.376-7.04-36.736-7.04-50.08-0.032l-177.632 93.76c-5.92 3.136-11.52 4.64-16.512 4.64a20.896 20.896 0 0 1-12.544-3.968c-7.36-5.28-10.72-14.784-8.48-27.84l33.92-198.56c2.656-15.04-4.576-37.408-15.584-48.16l-143.68-140.608c-9.376-9.216-12.224-18.816-9.408-27.328 2.816-8.64 10.752-14.72 23.776-16.64l198.528-28.96c15.136-2.208 33.92-15.936 40.64-29.664l88.8-180.736c5.792-11.776 14.08-17.536 23.168-17.536 9.12 0 17.408 5.76 23.2 17.536l88.8 180.736c6.848 13.76 25.536 27.456 40.576 29.664l198.592 28.992c13.056 1.92 21.024 8 23.808 16.512 2.72 8.288 0.192 17.472-8.32 26.336z" fill="#36383F" p-id="5550"></path></svg>
                        : <svg t="1718461099942" onClick={() => { setShow(true); Toast.info('已取消收藏') }} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3912" width="27" height="27"><path d="M715.757 853.758c-14.978-0.001-34.261-4.837-57.312-14.372C608.258 818.626 557.238 808.1 506.8 808.1c-50.437 0-101.457 10.526-151.642 31.286-23.055 9.536-42.337 14.372-57.312 14.372-15.505 0-22.095-5.183-25.703-9.081-11.017-11.902-15.527-38.546-12.702-75.022 8.418-108.7-23.106-205.894-93.698-288.88-26.326-30.948-37.931-56.889-32.677-73.045 5.246-16.133 29.835-30.263 69.239-39.786 105.822-25.574 188.367-85.652 245.34-178.565 21.226-34.614 42.234-53.677 59.154-53.677s37.928 19.063 59.156 53.678c56.973 92.912 139.518 152.99 245.34 178.564 39.4 9.523 63.989 23.652 69.235 39.785 5.254 16.156-6.351 42.098-32.676 73.045-70.589 82.984-102.114 180.177-93.699 288.879 2.827 36.483-1.682 63.128-12.695 75.027-3.607 3.896-10.195 9.077-25.698 9.077l-0.005 0.001z" fill="#FFFFFF" p-id="3913"></path><path d="M506.8 160.708c0.852 0.19 14.704 4.007 37.843 41.74C605.2 301.203 692.939 365.06 805.422 392.244c44.418 10.736 51.292 23.116 51.329 23.197 0.031 0.127 1.765 14.218-27.937 49.136-75.021 88.195-108.526 191.487-99.582 307.01 3.458 44.635-5.711 55.66-6.179 56.172-0.519 0.281-2.811 0.999-7.297 0.999-8.029 0-22.832-2.164-47.755-12.474-53.232-22.019-107.467-33.184-161.2-33.184-53.733 0-107.968 11.165-161.198 33.184-24.924 10.31-39.727 12.474-47.756 12.474-4.486 0-6.776-0.719-7.292-0.999-0.464-0.506-9.646-11.518-6.187-56.174 8.947-115.519-24.557-218.812-99.581-307.009-29.702-34.916-27.97-49.008-27.952-49.095 0.049-0.12 6.925-12.501 51.344-23.236 112.485-27.185 200.224-91.042 260.78-189.796 23.138-37.734 36.989-41.551 37.841-41.741m0-50.007c-26.822 0-53.644 21.87-80.466 65.609-53.641 87.477-130.277 143.256-229.901 167.333-99.626 24.078-116.203 75.188-49.732 153.329 66.471 78.143 95.743 168.394 87.815 270.752-5.733 74.019 15.382 111.033 63.33 111.033 18.357 0 40.643-5.422 66.868-16.27 47.362-19.591 94.724-29.387 142.087-29.387 47.363 0 94.725 9.796 142.088 29.387 26.219 10.846 48.513 16.27 66.867 16.27 47.957 0 69.062-37.008 63.326-111.033-7.924-102.358 21.345-192.608 87.817-270.752 66.468-78.142 49.892-129.251-49.73-153.329-99.626-24.077-176.26-79.855-229.901-167.333-26.823-43.739-53.646-65.609-80.468-65.609z" fill="#1A1A1A" p-id="3914"></path><path d="M468.151 362.061c-25.768 41.906-62.575 68.628-110.423 80.164-47.853 11.533-55.814 36.019-23.886 73.453 31.923 37.435 45.984 80.672 42.177 129.707-3.81 49.037 17.034 64.169 62.535 45.398 45.496-18.772 90.996-18.772 136.492 0 45.497 18.771 66.342 3.639 62.535-45.398-3.807-49.035 10.251-92.272 42.177-129.707 31.927-37.434 23.966-61.92-23.885-73.453-47.85-11.536-84.659-38.258-110.424-80.164-25.77-41.91-51.533-41.91-77.298 0z" fill="#FFCD36" p-id="3915"></path></svg>

                    }
                </span>
                <ServiceO style={{ fontSize: '26px', margin: '10px 40px' }} />
                <button className='btn2'>立即购买</button>
            </div>
            <ShareSheet
                visible={visible}
                options={options}
                title='立即分享给好友'
                onCancel={() => setVisible(false)}
                onClick={(option, index) => {
                    Toast.info('分享成功')
                    setVisible(false)
                }}
                onSelect={(option, index) => {
                    Toast.info('分享成功')
                    setVisible(false)
                }}
            />
        </div>
    )
}

